<template>
  <div class="nav_m flex">
    <div class="nav_lf flexVam">
      <i class="el-icon-location-outline"></i>
      <div class="nav_lf_2">{{clinicName}}</div>
      <img class="nav_lf_3" src="/static/img/icon_Choice.png" alt />
    </div>
    <div class="nav_lr flex">
      <!-- <img class="nav_lr_hd" src="/static/img/demo/12@3x.png" alt=""> -->
      <img class="nav_lr_hd" :src="img" alt />
      <div class="nav_lr_name">
        <div class="nav_lr_name_1">{{name}}</div>
        <div class="nav_lr_name_2"></div>
      </div>
      <img class="nav_lrR_but cursor" @click="quitClick" src="/static/img/icon_exit.png" alt />
    </div>
  </div>
</template>
<script>
export default {
  props: {},
  components: {},
  data() {
    return {
      name: "暂无",
      clinicName: "远程问诊",
      img: null
    };
  },
  filters: {},
  created: function() {},
  mounted() {
    this.name = localStorage.getItem("doctorName") || "";
    this.img =
      localStorage.getItem("doctorImg") || "/static/img/demo/12@3x.png";
  },
  watch: {},
  methods: {
    quitClick() {
      let self = this;
      if (self.$store.state.common.DoctorId) {
        if (self.$store.state.common.DoctorSig) {
          if (
            self.$store.state.common.STATE == 1 ||
            self.$store.state.common.STATE == 2 ||
            self.$store.state.common.STATE == 3
          ) {
            self.$confirm("是否要退出登录?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消"
            })
              .then(() => {
                localStorage.clear();
                sessionStorage.clear();
                // 返回登录页
                self.basePushFun("/login");
                // self.$emit("quit", "");
              })
              .catch(() => {
                self.$message({
                  type: "info",
                  message: "已取消"
                });
              });
          } else {
            self.$message("正在接诊中，请先结束问诊");
          }
        } else {
          self.$message("腾讯服务异常！暂无法开始接诊");
        }
      } else {
        self.$message("医生状态异常！暂无法开始接诊");
        self.basePushFun("/login");
      }
    },
    async quitFun(id) {}
  }
};
</script>
<style scoped>
/* 退出 */

.nav_lr_hd {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  margin-right: 12px;
}

.nav_lr_name {
  height: 100%;
  display: flex;
  align-items: center;
  margin-right: 20px;
}
.nav_lr_name_1 {
  height: 19px;
  font-size: 14px;
  font-family: Helvetica;
  color: rgba(42, 41, 40, 1);
  line-height: 17px;
}
.nav_lr_name_2 {
  height: 20px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(122, 118, 118, 1);
  line-height: 20px;
}

.nav_lrR_but {
  width: 20px;
  height: 20px;
  margin-right: 60px;
  overflow: hidden;
}

.nav_lr {
  width: calc(100% - 780px);
  height: 100%;
  align-items: center;
  justify-content: flex-end;
}

.nav_lf {
  height: 100%;
  width: 240px;
  overflow: hidden;
  background: rgba(255, 94, 41, 1);
  box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1);
}
.nav_lf_1 {
  width: 13px;
  height: 15px;
}
.el-icon-location-outline {
  font-size: 18px;
  color: #fff;
  font-weight: 800;
}
.nav_lf_2 {
  margin-right: 12px;
  margin-left: 12px;
  font-size: 16px;
  color: rgba(255, 255, 255, 1);
}
.nav_lf_3 {
  width: 10px;
  height: 7px;
}
.nav_m {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  height: 60px;
  justify-content: space-between;
}
</style>
